<template>
  <view class="card flex-row relative padding-top-20 padding-lr-30 padding-bottom-30" @click="toDetail">
    <l-avatar :avatar="item.driverAvatar" size="100rpx" />
    <view class="margin-left-30 flex-column ">
      <view class="flex-row align-center">
        <text class="text-40 color-t1">{{ item.driverName }}</text>

        <view v-if="info.guaranteeStatus == 1 && showBtn" class="guarantee flex-row align-center margin-left-20">
          <image class="guarantee_icon" :src="imgUrl+'icon_db.svg'" />
          <text class="text-22">平台担保</text>
        </view>
        <view v-else-if="showBtn" class="guarantee flex-row align-center margin-left-20 un-guarantee">
          <image class="guarantee_icon" :src="imgUrl+'icon_undb.svg'" />
          <text class="text-22">未担保</text>
        </view>
      </view>

      <view class="margin-tb-10">
        <tui-rate :current="item.score" :hollow="true" :size="20" disabled :normal="colorBorder" :active="colorWarning" />
      </view>

      <view class="flex-row align-center">
        <text class="text-26 color-t3">接单数：</text>
        <text class="text-26 color-t1">{{ item.ordersCount }}</text>
        <text class="text-26 color-t3 margin-left-20">评价数：</text>
        <text class="text-26 color-t1">{{ item.evaluationsCount }}</text>
      </view>

      <view class="flex-row align-center margin-top-20">
        <view v-if="item.scopeName" class="tag flex-row flex-center">
          <text class="text-22 color-t3">{{ item.scopeName }}</text>
        </view>
        <view v-if="item.drivingReadyModel" class="tag flex-row flex-center margin-lr-20">
          <text class="text-22 color-t3">准驾车型：{{ item.drivingReadyModel }}</text>
        </view>
        <view v-if="item.drivingAge" class="tag flex-row flex-center">
          <text class="text-22 color-t3">驾龄：{{ item.drivingAge }}年</text>
        </view>
      </view>
    </view>

    <view v-if="showBtn" class="price flex-column flex-center">
      <view class="margin-bottom-7">
        <text class="text-34 color-error">￥{{ item.driverFee }}</text>
      </view>
      <tui-button width="140rpx" height="60rpx" shape="circle" @click="chooseVehicle">选择</tui-button>
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
import { mapMutations } from 'vuex'
export default {
  name: 'DriverItem',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      imgUrl: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/',
      colorWarning: colors.colorWarning,
      colorBorder: colors.colorBorder
    }
  },
  methods: {
    toDetail() {
      if (this.showBtn) this.jump('/driver/platform-driver-detail/platform-driver-detail?info=' + JSON.stringify(this.item))
    },
    chooseVehicle() {
      this.setChooseDriverInfo({
        driverId: this.item.userId,
        driverName: this.item.driverName,
        platformDriverFee: this.item.driverFee
      })
      this.jump()
    },
    ...mapMutations({
      setChooseDriverInfo: 'order/setChooseDriverInfo'
    })
  }
}
</script>

<style scoped lang="scss">
@include setMargin(bottom,7);

.guarantee{
  padding:0 14rpx;
  height: 44rpx;
  background: rgba(218, 166, 101, 0.1);
  border-radius: 22rpx;
  border: 2rpx solid $color-primary;
}

.guarantee_icon{
  width:34rpx;
  height:30rpx;
  margin-right:8rpx;
}

.un-guarantee{
  background: rgba(153, 153, 153, 0.16);
  border: 2rpx solid $color-border;
}

.tag{
  padding:0 14rpx;
  height:38rpx;
  border-radius:4rpx;
  background:rgba(244, 244, 244, .67);
  border:2rpx solid $color-border;
}

.price{
  @include position(absolute,$top:22rpx,$right:28rpx);
}
</style>
